 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>Tobis demolitious</title>
 	<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="Stylesheet" />
 	<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 	<script>
 	$(document).ready(function(){
 		var dataid = "";
 		var timeOut;
 		var timerIsOn=0;
 		timedCount();
 		$(".tabs").tabs();
 		$("a.button").button()
 		.css("display", "inline-block")
 		.click(function(){
 			$(".tabs").tabs("select", parseInt(this.id));
 			return false;
 		});
 		$("#updatecheck").button({icons: {primary: "ui-icon-refresh"}})
 		.click(function(){
 			if (!timerIsOn){
 				timerIsOn = 1;
 				timedCount();
 				$("#updatelabel").html("Updating...");
				$(".ui.icon").css("background-image","url(http://jqueryui.com/themeroller/images/?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important;");
 				return true;
 			}
 			else
 			{
 				clearTimeout(timeOut);
 				timerIsOn = 0;
 				$("#updatelabel").html("Update");
 				return false;
 			}
 		});

//alert(timerIsOn);
	function timedCount(){
		$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=e6c7f1202577ff237f4bd0ca3ef76c66&_render=json&_callback=?", function(data){
			var i=0;
			var step = 95 / data.count;
			if (data.value.items[i].guid.content != dataid){
				$(".newsitem").empty().remove();
				dataid = data.value.items[i].guid.content;
				$.each(data.value.items, function(i){
					var currentOpacity = 100 - (step * i);
					$(".news").append("<div class=\"newsitem\" id=\"newsid" + i + "\"><a href=\"" + data.value.items[i].link + "\">" + data.value.items[i].title + "</a></div>");
					if ($.browser.msie){
						$("#newsid" + i).css("filter", "alpha(opacity=" + currentOpacity + ")");
					}else{
						$("#newsid" + i).css("filter", "opacity=" + currentOpacity / 100 + ")");
					};
					$("#newsid" + i + " a[href*='engadget']").parent().css("background-color", "#D4D3E3");
					$("#newsid" + i + " a[href*='gizmodo']").parent().css("background-color", "#E3D3D6");
					$("#newsid" + i + " a[href*='lifehacker']").parent().css("background-color", "#D3E3DA");
					i++;
				});
			};
			event.preventDefault;
		});
		if (timerIsOn){
	 		timeOut = setTimeout(timedCount,15000);
		};
	}
});
 </script>
 <style type="text/css">
 body { background-color: white; font-family:Arial, Helvetica, sans-serif; font-size:12px; }
 a:link { color: black; text-decoration:none; }
 a:visited { color: darkgray; text-decoration:none; }
 a:hover { color: #ffaf0f; text-decoration:none; }
 a:active { color: #ffaf0f; text-decoration:none; }
 a.button { float:left; font-size:10px;  }
 .header { background:#cccccc; }
 .newsitem { width:100%; }
 .footer { font-size:10px; }
 </style>
</head>
<body>
	<div class="header">
		<img src="http://tobinet.googlecode.com/svn/TobiNETLogo6.png" width="300" height="150" alt="Logo">
	</div>
	<div class="content">
		<div class="menu">
			<a class="button" id="1">Blog</a>
			<a class="button" id="0">News</a>
			<a class="button" id="About">About this site</a>
		</div>
		<div class="tabs">
			<ul><li><a href="#news">News</a></li>
				<li><a href="#blog">Blog</a></li>
			</ul>
			<div id="news" class="news">News from
				<a style="color:#005C99" href="http://www.engadget.com">Engadget</a>, 
				<a style="color:#3D993D" href="http://www.lifehacker.com">Lifehacker</a> and 
				<a style="color:#990000" href="http://www.gizmodo.com">Gizmodo</a>
				<input type="checkbox" id="updatecheck" class="button"/>
				<label for="updatecheck">
					<span id="updatelabel">Update</span>
				</label>
			</div>
			<div id="blog" class="blog">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque laoreet, arcu ac tempor adipiscing, leo nibh pretium orci, ut auctor nisl tortor sed quam. In interdum nulla et tellus eleifend interdum. Pellentesque consectetur fringilla tempor. Nullam sit amet purus diam. Praesent arcu purus, dictum id lobortis ac, sagittis adipiscing ipsum. Sed laoreet magna risus. Phasellus eget eleifend dolor. Phasellus turpis odio, rutrum ac sodales a, egestas eu velit. Aenean commodo, massa eu facilisis consequat, neque nisl auctor metus, quis pharetra elit tellus vel massa. Phasellus non augue quis enim ornare condimentum. Vestibulum ut erat non augue rutrum dapibus. Nunc vel quam velit. Nulla eu erat libero, sed laoreet urna. Ut non sem et erat condimentum suscipit ullamcorper vel mi. </p>
				<p>Cras fringilla est quis mauris porttitor vehicula. Morbi sodales sollicitudin dui, in malesuada orci ultrices in. Praesent suscipit consectetur tincidunt. Duis nunc quam, adipiscing eu tincidunt at, sodales ac felis. Suspendisse potenti. Aliquam dapibus sem in purus dignissim a commodo lorem scelerisque. Etiam vel risus eu elit fringilla ornare sed nec sapien. </p>
				<p>Cras pretium malesuada libero, quis vulputate risus porttitor vitae. Aenean imperdiet lectus sed ligula sodales commodo. Praesent elementum turpis sit amet risus tincidunt suscipit. Vivamus feugiat tincidunt venenatis. Quisque pulvinar hendrerit eros id commodo. Sed condimentum imperdiet augue, eu egestas turpis vulputate id. Quisque est erat, convallis in fermentum eget, sodales ac mi. Quisque vel lacus odio, vel hendrerit est. Nullam quis aliquam erat. Mauris tincidunt nulla vitae nisl ultrices sed volutpat risus pellentesque. Morbi sodales, diam ut dignissim porta, neque augue scelerisque eros, ac congue elit diam et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum sed nibh eget risus tempus adipiscing. </p>
				<p>Quisque lobortis est et est venenatis accumsan. Mauris ut elit lacus. Aenean at nisi lorem. Donec consectetur est id ante volutpat quis tristique dolor vulputate. In eu turpis ut turpis volutpat porta vitae in leo. Aenean tempor pellentesque felis, et tincidunt purus condimentum a. Nulla facilisi. Suspendisse potenti. In dictum ultrices justo, et vulputate enim interdum sed. In in magna eget dui ullamcorper ultricies. </p>
				<p>Aenean elementum cursus rutrum. Aliquam sollicitudin risus dignissim nunc dapibus commodo. Mauris porta velit non nunc tincidunt id semper magna iaculis. Donec ornare ipsum non ipsum congue tempor. Ut mattis libero in augue dignissim et pellentesque diam blandit. Fusce neque arcu, eleifend ut consectetur ut, condimentum a risus. Curabitur in nulla suscipit eros vehicula mollis vitae quis lorem. Suspendisse quis purus neque. Nunc ultricies elit in erat auctor hendrerit. Donec eget gravida nisi. Phasellus eu rutrum tellus. Aenean vel nibh lorem. Cras ut quam in dolor hendrerit semper vel condimentum nisl. </p>
				<p>Mauris gravida est ut eros bibendum blandit. Proin laoreet tellus tempor ligula aliquet molestie. Nam tincidunt eros vel turpis sodales et mattis massa congue. Nunc et orci in tortor suscipit pellentesque. Donec viverra, ligula vitae condimentum suscipit, risus velit feugiat arcu, quis malesuada risus orci sit amet eros. Etiam a ante nec metus vestibulum volutpat. Mauris euismod placerat mattis. Maecenas sollicitudin, dui in condimentum pulvinar, leo enim gravida orci, et laoreet nisl purus quis enim. Quisque id risus quis erat hendrerit eleifend. Integer ut malesuada ipsum. Duis arcu elit, dictum non ultrices vitae, tristique ut diam. Maecenas pretium accumsan euismod. Integer tellus lectus, blandit quis aliquam a, iaculis vitae mi. Morbi in enim id lorem faucibus venenatis. Nulla ullamcorper congue interdum. Cras mattis dolor pulvinar erat auctor ultrices. </p>
				<p>Aenean vel nisl metus, sit amet lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc at nunc ac neque lobortis gravida. Curabitur consequat tortor in lectus cursus tempor. Pellentesque rutrum est fringilla enim aliquam in laoreet diam facilisis. Integer elementum mi ut arcu volutpat ornare. Duis venenatis aliquet mollis. Ut quis felis elit, id interdum massa. Aliquam accumsan, urna non mollis fermentum, urna leo fermentum eros, ut facilisis neque nulla et justo. Phasellus eget tincidunt velit. Vestibulum ultricies dolor non orci vulputate ut venenatis metus vehicula. Nulla consectetur, eros et imperdiet sodales, ligula mauris hendrerit arcu, quis feugiat nisi elit a nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam feugiat, est sit amet porta pellentesque, diam nisi faucibus mauris, vitae posuere tellus diam in ante. </p>
			</div>
		</div>
	</div>
	<div class="footer">Default random footer text. with some random contact information</div>
</body>
</html>